<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-04-04 21:35:31"
-->
<template>
  <v-container>
    <v-form ref="navmenuform">
      <v-row>
        <v-col cols="12" sm="4">
          <v-card>
            <v-card-title>添加菜单项</v-card-title>
            <v-card-text>
              <v-container>
                <v-card flat>
                  <v-card-text>
                    <ContentSelect prepend-icon="menu_book" label="文章" return-object v-model="content">
                      <v-btn :disabled="content === null" @click="formData.content.push({ title: content.title, data: { isEdit: false, typeText: '文章', title: content.name, type: 'content', data: content.id } })">添加</v-btn>
                    </ContentSelect>
                    <PagesSelect prepend-icon="pages" label="页面" return-object v-model="page">
                      <v-btn :disabled="page === null" @click="formData.content.push({ title: page.title, data: { isEdit: false, typeText: '页面', title: page.name, type: 'page', data: page.id } })">添加</v-btn>
                    </PagesSelect>
                    <CategorySelect prepend-icon="category" return-object label="栏目" v-model="category">
                      <v-btn :disabled="category === null" @click="formData.content.push({ title: category.name, data: { isEdit: false, typeText: '栏目', title: category.name, type: 'category', data: category.cid } })">添加</v-btn>
                    </CategorySelect>
                  </v-card-text>
                </v-card>
                <CustomLink label="自定义链接" v-model="link">
                  <v-btn :disabled="link === null" @click="formData.content.push({ title: link.name, data: { isEdit: false, typeText: '自定义链接', title: link.name, type: 'link', data: link.link } })">添加</v-btn>
                </CustomLink>
              </v-container>
            </v-card-text>
          </v-card>
        </v-col>
        <v-col cols="12" sm="8">
          <v-card>
            <v-card-title>菜单内容</v-card-title>
            <v-card-text>
              <v-text-field label="菜单名称" v-model="formData.name"></v-text-field>
              <v-combobox :items="['首页导航','页脚']" label="位置" v-model="formData.position"></v-combobox>
              <p class="px-4" v-if="formData.content.length <=0">请从左侧选择菜单项内容并进行添加！</p>
              <NavMenuTree v-model="formData.content" mode="edit" />
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn :to="{ name: 'NavMenu' }">返回</v-btn>
              <v-btn @click="submit" color="primary">保存</v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-form>
  </v-container>
</template>
<script>
import * as API from '@/api/admin/nav-menu.js'
export default {
  name: 'NavMenuForm',
  components: {
    NavMenuTree: () => import('./components/NavMenuTree.vue'),
    ContentSelect: () => import('./components/ContentSelect.vue'),
    PagesSelect: () => import('./components/PagesSelect.vue'),
    CategorySelect: () => import('./components/CategorySelect2.vue'),
    CustomLink: () => import('./components/CustomLink.vue')
  },
  props: {
    mid: {
      type: [Number, String],
      default: null
    },
    item: {
      type: Object,
      default: () => {
        return {
          name: '',
          content: [],
          position: ''
        }
      }
    }
  },
  data: function () {
    return {
      page: null,
      content: null,
      category: null,
      link: null,
      loading: false,
      formData: this.item || {
        content: [],
        title: '',
        position: ''
      },
      edit: false
    }
  },
  computed: {
    mode: function() {
      return this.formData.mid === undefined ? 'create' : 'edit'
    }
  },
  created: function () {
    if (this.mid !== null && this.item.mid === undefined) {
      API.fetchOne(this.mid).then(res => {
        this.formData = res.data
      })
    }
  },
  methods: {
    submit() {
      this.$validator.validate().then(result => {
        if (result) {
          this.loading = true
          const submitFunc = this.mode === 'create' ? API.createOne : API.updateOne
          submitFunc(this.formData).then(res => {
            this.$toasted.success(res.data)
            this.$router.push({ name: 'NavMenu' })
          }).catch(err => {
            return Promise.reject(err)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style>
</style>
